<template>
  <div>
    <UserInfoComp>
      <div>软件管理</div>
    </UserInfoComp>
  </div>

  <!-- 查询表单的部分 -->
  <div class="query-form">
    <el-form :inline="true">
      <el-form-item>
        <el-input v-model="queryInfo.sname" placeholder="请输入软件名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="queryInfo.vendor" placeholder="请输入软件名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button-group>
          <el-button type="primary" @click="requery">查询</el-button>
          <el-button type="danger" @click="reset">重置</el-button>
          <el-button type="success" @click="resetAdd">添加</el-button>
        </el-button-group>
      </el-form-item>
    </el-form>
  </div>

  <!-- 数据呈现的部分 -->
  <div>
    <el-table :data="list" stripe>
      <el-table-column width="180" prop="sname" label="软件名称"></el-table-column>
      <el-table-column prop="intro" label="软件简介"></el-table-column>
      <el-table-column prop="vendor" label="软件厂商"></el-table-column>
      <el-table-column width="180" prop="type.tname" label="软件分类"></el-table-column>
      <el-table-column width="160" label="操作">
        <template #default="scope">
          <el-button @click="showModify(scope.row)" type="primary" size="small">修改</el-button>"
          <el-button @click="del(scope.row)" type="danger" size="small">删除</el-button>"
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!-- 分页的部分 -->
  <div>
    <el-pagination
      v-model:current-page="page.pageNumber"
      v-model:page-size="page.pageSize"
      :total="page.total"
      :page-sizes="[2, 5, 10, 20]"
      @current-change="query"
      @size-change="query"
      layout="total,prev,pager,next,sizes"
    ></el-pagination>
  </div>

  <!-- 部门选择的部分 -->
  <el-dialog v-model="tvisible" title="选择软件类型">
    <SoftwareTypeComp @type-selected="selectedType" mode="selector"></SoftwareTypeComp>
  </el-dialog>

  <!-- {{ type }} -->

  <!-- 添加的部分 -->
  <el-dialog v-model="avisible" title="添加软件" :clsoe-on-click-modal="false" @closed="requery">
    <div>
      <el-form>
        <el-form-item>
          {{ addInfo }}
          <el-button @click="tvisible = true">{{ addButtonText }}</el-button>
        </el-form-item>

        <el-form-item>
          <el-input v-model="addInfo.sname" placeholder="软件名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="addInfo.intro" placeholder="软件简介"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="addInfo.vendor" placeholder="软件厂商"></el-input>
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <el-button @click="avisible = false">取消</el-button>
      <el-button type="primary" @click="add">确定</el-button>
    </template>
  </el-dialog>

  <!-- 修改的部分 -->
  <el-dialog v-model="mvisible" title="修改软件" :clsoe-on-click-modal="false" @closed="requery">
    <div>
      <el-form>
        <el-form-item>
          {{ addInfo }}
          <el-button @click="tvisible = true">{{ modifyButtonText }}</el-button>
        </el-form-item>

        <el-form-item>
          <el-input v-model="modifyInfo.sname" placeholder="软件名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="modifyInfo.intro" placeholder="软件简介"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="modifyInfo.vendor" placeholder="软件厂商"></el-input>
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <el-button @click="mvisible = false">取消</el-button>
      <el-button type="primary" @click="modify">保存</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import SoftwareTypeComp from '@/components/SoftwareTypeComp.vue'
import UserInfoComp from '@/components/UserInfoComp.vue'
import { onMounted, ref } from 'vue'
import { api } from '@/js/ajax'
import { tools } from '@/js/tools'
import { ElMessage, ElMessageBox } from 'element-plus'

onMounted(() => {
  query()
})

// #region 删除的部分
const del = (info) => {
  ElMessageBox.confirm(`是否要删除:${info.sname}?`, '删除确认')
    .then(() => {
      api.delete(`/crud/software/${info.sid}`, {}, (data) => {
        if (data.success) {
          ElMessage.success(data.message)
        } else {
          ElMessage.error(data.message)
        }
        // data.success? ElMessage.success(data.message):ElMessage.error(data.message)
        requery()
      })
    })
    .catch(() => {})
}

// #endregion

//#region 查询的区域
const page = ref({ pageSize: 10, pageNumber: 1 })
const queryInfo = ref({
  sname: '',
  vendor: '',
})
const list = ref([])

const requery = () => {
  page.value.pageNumber = 1
  query()
}
const reset = () => {
  queryInfo.value = {
    sname: '',
    vendor: '',
  }
  requery()
}

const query = () => {
  api.get(
    `/crud/software/${page.value.pageSize}/${page.value.pageNumber}`,
    queryInfo.value,
    (data) => {
      if (data.success) {
        page.value = data.data.pageBean
        list.value = data.data.data
        return
      }
      ElMessageBox.alert(data.message, '错误')
    },
  )
}
//#endregion

//#region 修改的部分
const modifyButtonText = ref('请选择分类...')

const mvisible = ref(false)

const modifyInfo = ref({
  stid: -1,
  sname: '',
  intro: '',
  vendor: '',
})

const modify = () => {
  api.put('/crud/software', modifyInfo.value, (data) => {
    if (data.success) {
      ElMessage.success('修改成功')
      mvisible.value = false
      return
    }
    ElMessage.alert(data.message, '错误')
  })
}

const showModify = (info) => {
  //通知选择模式是修改
  typemode.value = 'modify'
  modifyInfo.value = tools.mergeJson(info)
  modifyButtonText.value = info.type.tname
  mvisible.value = true
}

//#endregion

//#region 添加的部分
const addButtonText = ref('请选择分类...')

const avisible = ref(false)

const addInfo = ref({
  stid: -1,
  sname: '',
  intro: '',
  vendor: '',
})

const resetAdd = () => {
  //通知选择模式是添加
  typemode.value = 'add'
  addInfo.value = {
    stid: -1,
    sname: '',
    intro: '',
    vendor: '',
  }
  addButtonText.value = '请选择分类...'
  avisible.value = true
}

const add = () => {
  api.post('/crud/software', addInfo.value, (data) => {
    if (data.success) {
      ElMessage.success('添加成功')
      avisible.value = false
      return
    }
    ElMessage.alert(data.message, '错误')
  })
}

//#endregion

//#region 软件类型选择
const type = ref({})
const tvisible = ref(false)
const typemode = ref('add')

const selectedType = (typeinfo) => {
  type.value = typeinfo

  if (typeinfo.value == 'add') {
    addInfo.value.stid = typeinfo.stid
    addButtonText.value = typeinfo.tname
  } else if (typemode.value == 'modify') {
    modifyInfo.value.stid = typeinfo.stid
    modifyButtonText.value = typeinfo.tname
  }

  tvisible.value = false
}
//#endregion
</script>

<style scoped></style>
